<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
  <link href="./index.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet/less" type="text/css" href="./var_transition.less" />
  <script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.12.2/less.min.js"></script>
</head>
<body>
  <h2><span class="nowrap">有趣的css或html</span></h2><hr />
  <div class="var_transition">
    <div class="blue-container">
      <div class="green-container">
        <div class="container">
          <p class="title">这是个标题</p>
          <p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
        </div>
      </div>
    </div>
  </div>
</body><hr />
</html>